<template>
    <div class="animated fadeIn">
        <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="7" :lg="7" :md="7" :sm="24" :xs="24">
            <h4>磨铁畅销榜</h4>
            <i-table border height="400" :columns="columns1" :data="data1"></i-table>
            <!--<table>-->
                <!--<tr v-for="i in data1">-->
                    <!--<td>{{i.bookName}}</td>-->
                    <!--<td>{{i.product}}</td>-->
                    <!--<td v-if="i.range=='up'"><Icon type="arrow-up-a"></Icon></td>-->
                    <!--<td v-if="i.range=='down'"><Icon type="arrow-down-a"></Icon></td>-->
                <!--</tr>-->
            <!--</table>-->
            </Col>

            <Col span="7" :lg="7" :md="7" :sm="24" :xs="24">
            <h4>线上销售排行榜</h4>
            <i-table border height="400" :columns="columns1" :data="data1"></i-table>
            </Col>

            <Col span="7" :lg="7" :md="7" :sm="24" :xs="24">
            <h4>线下销售排行榜</h4>
            <i-table border height="400" :columns="columns1" :data="data1"></i-table>
            </Col>
        </Row>

        <Row type="flex" justify="space-between" class="code-row-bg" style="margin-top: 40px">
            <Col span="7" :lg="7" :md="7" :sm="24" :xs="24">
            <h4>出版社排行榜</h4>
            <i-table border height="400" :columns="columns1" :data="data1"></i-table>
            </Col>

            <Col span="7" :lg="7" :md="7" :sm="24" :xs="24">
            <h4>分类排行榜</h4>
            <i-table border height="400" :columns="columns1" :data="data1"></i-table>
            </Col>

            <Col span="7" :lg="7" :md="7" :sm="24" :xs="24">
            </Col>
        </Row>
    </div>
</template>

<script>
    export default {
        components: {},
        name: 'dashboard',
        data() {
            return {
                bool: '',
                columns1: [
                    {title: '书名',key: 'bookName',ellipsis: true},
                    {title: '产品',key: 'product'},
                    {title: '码洋',key: 'range',
                        filters: [
                            {label:"上涨",value:1},
                            {label:"下降",value:2}],
                        filterMultiple:false,
                        filterMethod (value, row) {
                            if (value === 1) {
                                return row.range === 'up';
                            } else if (value === 2) {
                                return row.range === 'down';
                            }
                        }
                    }
                ],
                data1: [
                    {bookName: '校花的贴身保镖',product: '电子书',range: "up"},
                    {bookName: '我的美女道士',product: '纸质书',range: "down"},
                    {bookName: '烈火青春',product: '电子书',range: "down"},
                    {bookName: '都是全能道士',product: '电子书',range: "up"},
                    {bookName: '都是全能道士',product: '电子书',range: "up"},
                    {bookName: '都是全能道士',product: '电子书',range: "up"},
                    {bookName: '都是全能道士',product: '电子书',range: "up"},
                    {bookName: '都是全能道士',product: '电子书',range: "up"},
                    {bookName: '都是全能道士',product: '电子书',range: "up"}
                ]
            }
        },
        methods: {},
        mounted() {
            const token = this.$store.getters.token;
        }
    }
</script>

<style type="text/css" scoped>
    h3, h4, h5 {
        margin: 12px
    }
</style>